<template>
  <div>
    <div v-if="!repoUrl">加载中。。。</div>
    <div v-else>
      欢迎访问
      <a :href="repoUrl">{{repoName}}</a>
    </div>
  </div>
</template>
<!--绑定事件监听 ---订阅消息
触发事件 --发布消息
 -->
<script>
import axios from "axios";
export default {
  data() {
    return {
      repoUrl: "",
      repoName: ""
    };
  },
  mounted() {
    //发起ajax请求
    const url = "https://api.github.com/search/repositories?q=v&sort=stars";
    // this.$http.get(url).then(
    //   response => {
    //     //成功
    //     const result = response.data;
    //     //得到最受欢迎的repo
    //     const mostRepo = result.items[0];
    //     this.repoUrl = mostRepo.html_url;
    //     this.repoName = mostRepo.name;
    //   },
    //   response => {
    //     alert("请求失败");
    //   }
    // );
    //使用axios发起ajax请求
    axios
      .get(url)
      .then(response => {
        //成功
        const result = response.data;
        //得到最受欢迎的repo
        const mostRepo = result.items[0];
        this.repoUrl = mostRepo.html_url;
        this.repoName = mostRepo.name;
      })
      .catch(error => {
        alert("请求失败了嗷");
      });
  }
};
</script>


<style>
</style>
